<template>
  <scroll-seamless :list="list">
    <div class="content-item" v-for="(item, index) in list" :key="index">
      <div class="item-inner">
        <el-row>
          <el-col :span="24">
            <span class="info-25"> {{ item.deviceName }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span class="labels-15">带速：</span>
            <span class="warning-20"> {{ numsFilter(item.speed) + ' 米/秒'}}</span>
          </el-col>
          <el-col :span="6">
            <span class="labels-15">密度：</span>
            <span class="warning-20"> {{ numsFilter(item.density) + '  吨/立方米'}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span class="labels-15">当日累计流量：</span>
            <span class="warning-20"> {{ numsFilter(item.currentDayFlow) + ' 吨'}}</span>
          </el-col>
          <el-col :span="6">
            <span class="labels-15">体积：</span>
            <span class="warning-20"> {{ numsFilter(item.currentDayVolume) + ' 立方米' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span class="labels-15"> 其中：</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span class="labels-15">早班：</span>
            <span class="warning-20"> {{ numsFilter(item.currentMorningFlow) + ' 吨' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span class="labels-15">中班：</span>
            <span class="warning-20"> {{ numsFilter(item.currentNoonFlow) + ' 吨' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span class="labels-15">晚班：</span>
            <span class="warning-20"> {{ numsFilter(item.currentNightFlow) + ' 吨' }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </scroll-seamless>
</template>

<script setup lang="ts">
import { GET_RESTFUL } from '@/api'
import useSettingStore from "@/stores/setting";
import { getDay } from "@/utils";

const list = ref<FlowData[]>([])
let timer:number

onMounted(()=>{
  getData()
  nextTick(()=>{
    swiper()
  })
})

onBeforeUnmount(()=>{
  clearData()
})

function numsFilter(msg){
  return msg || 0;
}
function getData() {
  let date = getDay(-1,'-');
  GET_RESTFUL("contrast",date).then((res) => {
    list.value = res.data
  })
}

function clearData() {
  if (timer) {
    clearInterval(timer)
    timer = null!
  }
}

function swiper() {
  if (timer) {
    return
  }
  let looper = () => {
    getData()
  }
  timer = setInterval(looper, useSettingStore().listAutoTime);
}
</script>

<style scoped lang="scss">

</style>